<template>
  <div class="navigation-page">
    <!-- 全局应用头部 -->
    <NavigationHeader
      @add-first-menu="showAddFirstMenuDialog"
      @add-second-menu="showAddSecondMenuDialog"
      @add-website="showAddWebsiteDialog"
      @theme-change="handleThemeChange"
    />

    <!-- 主内容区域 -->
    <div class="navigation-main">
      <!-- 左侧菜单 - 使用完整菜单列表 -->
      <NavigationSidebar
        :menu-list="fullMenuWebsiteVOList"
        :selected-sub-category-id="selectedSubCategoryId"
        @subcategory-selected="handleSubCategorySelected"
      />

      <!-- 右侧内容区 -->
      <NavigationContent
        ref="websiteContentRef"
        :menu-list="menuWebsiteVOList"
        :full-menu-list="fullMenuWebsiteVOList"
        :category-selected-sub-category-map="categorySelectedSubCategoryMap"
        :search-keyword="searchKeyword"
        :loading="loading"
        @subcategory-tab-click="handleRightTabClick"
        @update:search-keyword="searchKeyword = $event"
        @search="handleSearch"
        @clear-search="handleClearSearch"
        @website-menu-updated="handleWebsiteMenuUpdated"
      />
    </div>

    <!-- 新增一级菜单对话框 -->
    <ElDialog
      v-model="showFirstMenuDialog"
      title="新增一级菜单"
      width="500px"
      :close-on-click-modal="false"
    >
      <ElForm
        ref="firstMenuFormRef"
        :model="firstMenuForm"
        label-width="100px"
        :rules="{
          menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }]
        }"
      >
        <ElFormItem label="菜单名称" prop="menuName">
          <ElInput v-model="firstMenuForm.menuName" placeholder="请输入菜单名称" />
        </ElFormItem>
        <ElFormItem label="图标">
          <ElSelect
            v-model="firstMenuForm.icon"
            placeholder="请选择图标（可选）"
            style="width: 100%"
            clearable
            filterable
          >
            <template #prefix-icon>
              <svg v-if="firstMenuForm.icon" class="icon-svg" aria-hidden="true" style="width: 16px; height: 16px;">
                <use :xlink:href="firstMenuForm.icon"></use>
              </svg>
            </template>
            <ElOption
              v-for="icon in iconOptions"
              :key="icon.value"
              :label="icon.label"
              :value="icon.value"
            >
              <div style="display: flex; align-items: center; gap: 8px;">
                <svg class="icon-svg" aria-hidden="true" style="width: 18px; height: 18px; flex-shrink: 0;">
                  <use :xlink:href="icon.value"></use>
                </svg>
                <span>{{ icon.label }}</span>
              </div>
            </ElOption>
          </ElSelect>
          <!-- 选中后的预览 -->
          <div v-if="firstMenuForm.icon" style="margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 8px; background: #f5f7fa; border-radius: 4px;">
            <svg class="icon-svg" aria-hidden="true" style="width: 24px; height: 24px; flex-shrink: 0;">
              <use :xlink:href="firstMenuForm.icon"></use>
            </svg>
            <span style="font-size: 13px; color: #606266;">
              {{ iconOptions.find(opt => opt.value === firstMenuForm.icon)?.label || '图标预览' }}
            </span>
          </div>
        </ElFormItem>
        <ElFormItem label="排序">
          <ElInputNumber v-model="firstMenuForm.menuSort" :min="0" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showFirstMenuDialog = false">取消</el-button>
          <el-button type="primary" @click="handleFirstMenuSubmit">确定</el-button>
        </span>
      </template>
    </ElDialog>

    <!-- 新增二级菜单对话框 -->
    <ElDialog
      v-model="showSecondMenuDialog"
      title="新增二级菜单"
      width="500px"
      :close-on-click-modal="false"
    >
      <ElForm
        ref="secondMenuFormRef"
        :model="secondMenuForm"
        label-width="100px"
        :rules="{
          parentId: [{ required: true, message: '请选择一级菜单', trigger: 'change' }],
          menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }]
        }"
      >
        <ElFormItem label="一级菜单" prop="parentId">
          <ElSelect
            v-model="secondMenuForm.parentId"
            placeholder="请选择一级菜单"
            style="width: 100%"
            @change="handleFirstMenuChange"
          >
            <ElOption
              v-for="category in fullMenuWebsiteVOList"
              :key="category.oneMenuId"
              :label="category.oneMenuName"
              :value="category.oneMenuId"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem 
          v-if="secondMenuForm.parentId && currentSecondMenuOptions.length > 0" 
          label="当前二级菜单"
        >
          <div style="font-size: 13px; color: #606266; line-height: 1.6;">
            该一级菜单下已存在的二级菜单：
            <div style="margin-top: 8px; padding: 8px 12px; background: #f5f7fa; border-radius: 4px;">
              <span
                v-for="(subMenu, index) in currentSecondMenuOptions"
                :key="subMenu.twoMenuId"
                style="display: inline-block; margin-right: 12px; margin-bottom: 4px;"
              >
                {{ subMenu.twoMenuName }}
                <span v-if="index < currentSecondMenuOptions.length - 1">、</span>
              </span>
            </div>
          </div>
        </ElFormItem>
        <ElFormItem label="菜单名称" prop="menuName">
          <ElInput v-model="secondMenuForm.menuName" placeholder="请输入菜单名称" />
        </ElFormItem>
        <ElFormItem label="排序">
          <ElInputNumber v-model="secondMenuForm.menuSort" :min="0" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showSecondMenuDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSecondMenuSubmit">确定</el-button>
        </span>
      </template>
    </ElDialog>

    <!-- 新增网站对话框 -->
    <ElDialog
      v-model="showWebsiteDialog"
      title="新增网站"
      width="600px"
      :close-on-click-modal="false"
    >
      <ElForm
        ref="websiteFormRef"
        :model="websiteForm"
        label-width="100px"
        :rules="{
          firstMenuId: [{ required: true, message: '请选择一级菜单', trigger: 'change' }],
          secondMenuId: [{ required: true, message: '请选择二级菜单', trigger: 'change' }],
          websiteName: [{ required: true, message: '请输入网站名称', trigger: 'blur' }],
          websiteUrl: [
            { required: true, message: '请输入网站URL', trigger: 'blur' },
            { type: 'url', message: '请输入有效的URL地址', trigger: 'blur' }
          ]
        }"
      >
        <ElFormItem label="一级菜单" prop="firstMenuId">
          <ElSelect
            v-model="websiteForm.firstMenuId"
            placeholder="请选择一级菜单"
            style="width: 100%"
            @change="handleWebsiteFirstMenuChange"
          >
            <ElOption
              v-for="category in fullMenuWebsiteVOList"
              :key="category.oneMenuId"
              :label="category.oneMenuName"
              :value="category.oneMenuId"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="二级菜单" prop="secondMenuId">
          <ElSelect
            v-model="websiteForm.secondMenuId"
            placeholder="请选择二级菜单"
            style="width: 100%"
            :disabled="!websiteForm.firstMenuId"
          >
            <ElOption
              v-for="subMenu in currentWebsiteSecondMenuOptions"
              :key="subMenu.twoMenuId"
              :label="subMenu.twoMenuName"
              :value="subMenu.twoMenuId"
            />
          </ElSelect>
          <div v-if="websiteForm.firstMenuId && currentWebsiteSecondMenuOptions.length === 0" style="font-size: 12px; color: #f56c6c; margin-top: 4px;">
            该一级菜单下暂无二级菜单，请先创建二级菜单
          </div>
        </ElFormItem>
        <ElFormItem label="网站名称" prop="websiteName">
          <ElInput v-model="websiteForm.websiteName" placeholder="请输入网站名称" />
        </ElFormItem>
        <ElFormItem label="网站URL" prop="websiteUrl">
          <ElInput v-model="websiteForm.websiteUrl" placeholder="请输入网站URL，如：https://example.com" />
        </ElFormItem>
        <ElFormItem label="网站Logo">
          <ElInput v-model="websiteForm.websiteLogo" placeholder="请输入网站Logo URL（可选）" />
        </ElFormItem>
        <ElFormItem label="排序">
          <ElInputNumber v-model="websiteForm.websiteSort" :min="0" />
        </ElFormItem>
        <ElFormItem label="备注">
          <ElInput
            v-model="websiteForm.websiteRemark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注（可选）"
          />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showWebsiteDialog = false">取消</el-button>
          <el-button type="primary" @click="handleWebsiteSubmit">确定</el-button>
        </span>
      </template>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from 'vue'
import { ElMessage, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElInputNumber } from 'element-plus'
import { getAllWebsite, getWebsiteBySearchName, addWebsite } from '@/api/website'
import { addMenu } from '@/api/menu'
import type { MenuWebsiteVO } from '@/interfaces/data'
import { initTheme } from '@/utils/theme'
import NavigationHeader from './components/NavigationHeader.vue'
import NavigationSidebar from './components/NavigationSidebar.vue'
import NavigationContent from './components/NavigationContent.vue'

/**
 * 搜索关键词
 */
const searchKeyword = ref('')

/**
 * 加载状态
 */
const loading = ref(false)

/**
 * 完整的菜单网站数据列表
 * 用于左侧菜单显示，始终保留完整数据，不受搜索影响
 */
const fullMenuWebsiteVOList = ref<MenuWebsiteVO[]>([])

/**
 * 当前显示的菜单网站数据列表
 * 用于右侧内容显示：
 * - 搜索时：显示搜索结果
 * - 正常时：显示完整列表
 */
const menuWebsiteVOList = ref<MenuWebsiteVO[]>([])

/**
 * 选中的二级菜单ID（全局唯一，用于通知父组件和滚动定位）
 */
const selectedSubCategoryId = ref<number | null>(null)

/**
 * 每个一级菜单下选中的二级菜单ID（记录每个一级菜单的选择状态）
 * key: 一级菜单ID, value: 二级菜单ID
 */
const categorySelectedSubCategoryMap = ref<Record<number, number>>({})

/**
 * 右侧内容组件引用
 * 用于调用子组件的滚动方法
 */
const websiteContentRef = ref<InstanceType<typeof NavigationContent> | null>(null)

/**
 * 处理二级分类选择（从左侧菜单点击）
 * @param subCategoryId 二级分类ID
 */
function handleSubCategorySelected(subCategoryId: number) {
  selectedSubCategoryId.value = subCategoryId
  
  // 找到这个二级菜单属于哪个一级菜单，并记录选择状态
  for (const category of fullMenuWebsiteVOList.value) {
    const foundSubCategory = category.twoMenuList.find(sub => sub.twoMenuId === subCategoryId)
    if (foundSubCategory) {
      categorySelectedSubCategoryMap.value[category.oneMenuId] = subCategoryId
      break
    }
  }
  
  // 滚动到对应的二级分类
  websiteContentRef.value?.scrollToSubCategory(subCategoryId)
}

/**
 * 处理右侧标签点击（同时更新左侧选中状态）
 * 注意：右侧标签点击不需要滚动，因为已经在当前页面了
 * 只有在左侧菜单栏点击时，才会通过 handleSubCategorySelected 触发滚动
 * @param subCategoryId 二级分类ID
 */
function handleRightTabClick(subCategoryId: number) {
  selectedSubCategoryId.value = subCategoryId
  
  // 找到这个二级菜单属于哪个一级菜单，并记录选择状态
  for (const category of fullMenuWebsiteVOList.value) {
    const foundSubCategory = category.twoMenuList.find(sub => sub.twoMenuId === subCategoryId)
    if (foundSubCategory) {
      categorySelectedSubCategoryMap.value[category.oneMenuId] = subCategoryId
      break
    }
  }
}

/**
 * 处理搜索功能
 * 根据搜索关键词查询网站信息
 * @description
 * - 验证搜索关键词是否为空
 * - 调用API根据网站名称或描述搜索
 * - 仅更新右侧内容区的搜索结果（menuWebsiteVOList）
 * - 左侧菜单保持完整数据不变（fullMenuWebsiteVOList）
 * - 清空选中的二级菜单ID，避免滚动定位错误
 */
function handleSearch() {
  if (!searchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  
  loading.value = true
  selectedSubCategoryId.value = null
  
  getWebsiteBySearchName(searchKeyword.value.trim())
    .then((res) => {
      // 仅更新右侧显示的搜索结果
      // 左侧菜单仍然使用完整的菜单列表，不受搜索影响
      menuWebsiteVOList.value = res.data
    })
    .catch(() => {
      ElMessage.error('搜索失败，请稍后重试')
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 清除搜索条件
 * 重置搜索状态并重新加载完整数据
 * @description
 * - 清空搜索关键词（如果还没清空）
 * - 重新加载所有网站数据（显示完整列表，而不是搜索结果）
 * - 重置选中的二级菜单ID和选择状态映射
 */
function handleClearSearch() {
  // 确保搜索关键词已清空
  if (searchKeyword.value) {
    searchKeyword.value = ''
  }
  // 重新加载所有网站数据，显示完整列表
  loadAllWebsites()
  selectedSubCategoryId.value = null
  categorySelectedSubCategoryMap.value = {}
}

/**
 * 加载所有网站数据
 * 同时更新左侧菜单和右侧内容区的数据
 * @description
 * - 调用getAllWebsite API获取完整的菜单和网站数据
 * - 更新fullMenuWebsiteVOList（用于左侧菜单显示，不受搜索影响）
 * - 更新menuWebsiteVOList（用于右侧内容显示）
 * - 自动初始化选中状态：选中第一个一级菜单的第一个二级菜单
 * - 初始化每个一级菜单的默认选中状态为第一个二级菜单
 */
function loadAllWebsites() {
  loading.value = true
  
  getAllWebsite()
    .then((websiteRes) => {
      // 更新完整菜单列表（用于左侧菜单，不受搜索影响）
      fullMenuWebsiteVOList.value = websiteRes.data
      
      // 更新当前显示的菜单列表（用于右侧内容）
      menuWebsiteVOList.value = websiteRes.data
      
      // 数据加载完成后，自动选中第一个一级菜单的第一个二级菜单
      // 这样可以在左侧菜单栏点击时正确滚动定位，同时不影响视觉上每个一级菜单第一个标签的激活状态
      if (websiteRes.data.length > 0) {
        const firstCategory = websiteRes.data[0]
        if (firstCategory.twoMenuList && firstCategory.twoMenuList.length > 0) {
          const firstSubCategoryId = firstCategory.twoMenuList[0].twoMenuId
          selectedSubCategoryId.value = firstSubCategoryId
          // 初始化每个一级菜单的选中状态为第一个二级菜单
          websiteRes.data.forEach((category: MenuWebsiteVO) => {
            if (category.twoMenuList && category.twoMenuList.length > 0) {
              categorySelectedSubCategoryMap.value[category.oneMenuId] = category.twoMenuList[0].twoMenuId
            }
          })
        }
      }
    })
    .catch(() => {
      ElMessage.error('加载数据失败，请稍后重试')
    })
    .finally(() => {
      loading.value = false
    })
}

// ==================== 新增一级菜单相关 ====================
/**
 * 是否显示新增一级菜单对话框
 */
const showFirstMenuDialog = ref(false)

/**
 * 新增一级菜单表单数据
 * @property {string} menuName - 菜单名称（必填）
 * @property {string} icon - 菜单图标（可选）
 * @property {number} menuSort - 菜单排序（数字，默认为0）
 */
const firstMenuForm = ref({
  menuName: '',
  icon: '',
  menuSort: 0
})

/**
 * 新增一级菜单表单引用
 * 用于表单验证和重置
 */
const firstMenuFormRef = ref<InstanceType<typeof ElForm> | null>(null)

/**
 * 图标选项列表
 * 根据iconfont.css中定义的图标类生成
 * @property {string} value - 图标类名（如：icon-remen）
 * @property {string} label - 图标中文名称（用于显示）
 */
const iconOptions = [
  { value: '#icon-remen', label: '热门' },
  { value: '#icon-remen1', label: '热门1' },
  { value: '#icon-yinle', label: '音乐' },
  { value: '#icon-sousuo', label: '搜索' },
  { value: '#icon-shuben', label: '书本' },
  { value: '#icon-gongju', label: '工具' },
  { value: '#icon-daohang-', label: '导航' },
  { value: '#icon-haoping', label: '好评' },
  { value: '#icon-yuleAPP', label: '娱乐APP' },
  { value: '#icon-sucai', label: '素材' },
  { value: '#icon-yingshi', label: '影视' },
  { value: '#icon-xiazai', label: '下载' },
  { value: '#icon-zuixing-71', label: '最新' },
  { value: '#icon-tupian', label: '图片' },
  { value: '#icon-job', label: '工作' }
]

/**
 * 显示新增一级菜单对话框
 * 重置表单数据并清除验证状态
 */
function showAddFirstMenuDialog() {
  showFirstMenuDialog.value = true
  // 重置表单
  firstMenuForm.value = {
    menuName: '',
    icon: '',
    menuSort: 0
  }
  nextTick(() => {
    firstMenuFormRef.value?.clearValidate()
  })
}

/**
 * 提交新增一级菜单表单
 * 验证表单数据后调用API创建一级菜单
 * @description
 * - 验证表单必填项
 * - 构建请求数据（parentId固定为-1表示根菜单，menuType为1表示一级菜单）
 * - 调用addMenu API
 * - 成功后关闭对话框并刷新数据
 */
function handleFirstMenuSubmit() {
  if (!firstMenuFormRef.value) return
  
  firstMenuFormRef.value.validate((valid) => {
    if (valid) {
      const data = {
        parentId: -1, // 一级菜单的父ID固定为-1
        menuType: 1, // 1表示一级菜单
        menuName: firstMenuForm.value.menuName.trim(),
        icon: firstMenuForm.value.icon.trim() || undefined,
        menuSort: firstMenuForm.value.menuSort || 0
      }
      
      addMenu(data)
        .then(() => {
          ElMessage.success('新增一级菜单成功')
          showFirstMenuDialog.value = false
          loadAllWebsites() // 重新加载数据
        })
        .catch(() => {
          ElMessage.error('新增一级菜单失败，请稍后重试')
        })
    }
  })
}

// ==================== 新增二级菜单相关 ====================
/**
 * 是否显示新增二级菜单对话框
 */
const showSecondMenuDialog = ref(false)

/**
 * 新增二级菜单表单数据
 * @property {number | undefined} parentId - 所属一级菜单ID（必填，选择一级菜单后自动填充）
 * @property {string} menuName - 菜单名称（必填）
 * @property {number} menuSort - 菜单排序（数字，默认为0）
 */
const secondMenuForm = ref({
  parentId: undefined as number | undefined,
  menuName: '',
  menuSort: 0
})

/**
 * 新增二级菜单表单引用
 * 用于表单验证和重置
 */
const secondMenuFormRef = ref<InstanceType<typeof ElForm> | null>(null)

/**
 * 当前选中一级菜单下的二级菜单选项（计算属性）
 * 用于显示已存在的二级菜单，方便用户参考
 * @returns {Array} 返回选中一级菜单下的所有二级菜单列表
 * @description 根据选中的一级菜单ID，从fullMenuWebsiteVOList中查找对应的二级菜单列表
 */
const currentSecondMenuOptions = computed(() => {
  if (!secondMenuForm.value.parentId) {
    return []
  }
  
  const selectedCategory = fullMenuWebsiteVOList.value.find(
    category => category.oneMenuId === secondMenuForm.value.parentId
  )
  
  return selectedCategory?.twoMenuList || []
})

/**
 * 显示新增二级菜单对话框
 * 重置表单数据并清除验证状态
 */
function showAddSecondMenuDialog() {
  showSecondMenuDialog.value = true
  // 重置表单
  secondMenuForm.value = {
    parentId: 0, // 初始值为0，表示未选择
    menuName: '',
    menuSort: 0
  }
  nextTick(() => {
    secondMenuFormRef.value?.clearValidate()
  })
}

/**
 * 处理一级菜单选择变化
 * 当用户选择或切换一级菜单时触发
 * @description 切换一级菜单时，可以保持菜单名称等字段，让用户继续编辑
 * 也可以根据需求清空菜单名称（当前保持，如需清空可取消注释相关代码）
 */
function handleFirstMenuChange() {
  // 切换一级菜单时，可以保持菜单名称等字段，让用户继续编辑
  // 或者根据需求清空菜单名称
  // secondMenuForm.value.menuName = ''
}

/**
 * 提交新增二级菜单表单
 * 验证表单数据后调用API创建二级菜单
 * @description
 * - 验证表单必填项（一级菜单和菜单名称）
 * - 检查是否已选择一级菜单
 * - 构建请求数据（parentId为选中的一级菜单ID，menuType为2表示二级菜单）
 * - 调用addMenu API
 * - 成功后关闭对话框并刷新数据
 */
function handleSecondMenuSubmit() {
  if (!secondMenuFormRef.value) return
  
  secondMenuFormRef.value.validate((valid) => {
    if (valid) {
      if (secondMenuForm.value.parentId === undefined) {
        ElMessage.warning('请选择一级菜单')
        return
      }
      
      const data = {
        parentId: secondMenuForm.value.parentId, // 所属一级菜单ID
        menuType: 2, // 2表示二级菜单
        menuName: secondMenuForm.value.menuName.trim(),
        menuSort: secondMenuForm.value.menuSort || 0
      }
      
      addMenu(data)
        .then(() => {
          ElMessage.success('新增二级菜单成功')
          showSecondMenuDialog.value = false
          loadAllWebsites() // 重新加载数据
        })
        .catch(() => {
          ElMessage.error('新增二级菜单失败，请稍后重试')
        })
    }
  })
}

// ==================== 新增网站相关 ====================
/**
 * 是否显示新增网站对话框
 */
const showWebsiteDialog = ref(false)

/**
 * 新增网站表单数据
 * @property {number | undefined} firstMenuId - 所属一级菜单ID（必填）
 * @property {number | undefined} secondMenuId - 所属二级菜单ID（必填）
 * @property {string} websiteName - 网站名称（必填）
 * @property {string} websiteUrl - 网站URL地址（必填，需要符合URL格式）
 * @property {string} websiteLogo - 网站Logo URL（可选）
 * @property {string} websiteRemark - 备注信息（可选）
 * @property {number} websiteSort - 排序序号（数字，默认为0）
 */
const websiteForm = ref({
  firstMenuId: undefined as number | undefined,
  secondMenuId: undefined as number | undefined,
  websiteName: '',
  websiteUrl: '',
  websiteLogo: '',
  websiteRemark: '',
  websiteSort: 0
})

/**
 * 新增网站表单引用
 * 用于表单验证和重置
 */
const websiteFormRef = ref<InstanceType<typeof ElForm> | null>(null)

/**
 * 当前选中一级菜单下的二级菜单选项（计算属性）
 * 用于新增网站时的二级菜单联动选择
 * @returns {Array} 返回选中一级菜单下的所有二级菜单列表
 * @description 根据选中的一级菜单ID，从fullMenuWebsiteVOList中查找对应的二级菜单列表
 */
const currentWebsiteSecondMenuOptions = computed(() => {
  if (!websiteForm.value.firstMenuId) {
    return []
  }
  
  const selectedCategory = fullMenuWebsiteVOList.value.find(
    category => category.oneMenuId === websiteForm.value.firstMenuId
  )
  
  return selectedCategory?.twoMenuList || []
})

/**
 * 显示新增网站对话框
 * 重置表单数据并清除验证状态
 */
function showAddWebsiteDialog() {
  showWebsiteDialog.value = true
  // 重置表单
  websiteForm.value = {
    firstMenuId: undefined,
    secondMenuId: undefined,
    websiteName: '',
    websiteUrl: '',
    websiteLogo: '',
    websiteRemark: '',
    websiteSort: 0
  }
  nextTick(() => {
    websiteFormRef.value?.clearValidate()
  })
}

/**
 * 处理网站表单中一级菜单选择变化
 * 当用户选择或切换一级菜单时触发
 * @description 切换一级菜单时，自动清空二级菜单的选择，避免数据不一致
 */
function handleWebsiteFirstMenuChange() {
  // 切换一级菜单时，清空二级菜单的选择
  websiteForm.value.secondMenuId = undefined
}

/**
 * 提交新增网站表单
 * 验证表单数据后调用API创建网站
 * @description
 * - 验证表单必填项（一级菜单、二级菜单、网站名称、网站URL）
 * - 检查一级菜单和二级菜单是否都已选择
 * - 根据选中的一级和二级菜单ID，查找对应的二级菜单名称
 * - 构建请求数据（menuName使用二级菜单名称）
 * - 调用addWebsite API
 * - 成功后关闭对话框并刷新数据
 */
function handleWebsiteSubmit() {
  if (!websiteFormRef.value) return
  
  websiteFormRef.value.validate((valid) => {
    if (valid) {
      if (!websiteForm.value.firstMenuId || !websiteForm.value.secondMenuId) {
        ElMessage.warning('请选择一级菜单和二级菜单')
        return
      }
      
      // 根据二级菜单ID找到对应的菜单名称
      const selectedCategory = fullMenuWebsiteVOList.value.find(
        category => category.oneMenuId === websiteForm.value.firstMenuId
      )
      
      const selectedSubMenu = selectedCategory?.twoMenuList.find(
        subMenu => subMenu.twoMenuId === websiteForm.value.secondMenuId
      )
      
      if (!selectedSubMenu) {
        ElMessage.error('无法找到选中的二级菜单')
        return
      }
      
      const data = {
        menuName: selectedSubMenu.twoMenuName, // 使用二级菜单名称作为menuName
        websiteName: websiteForm.value.websiteName.trim(),
        websiteUrl: websiteForm.value.websiteUrl.trim(),
        websiteLogo: websiteForm.value.websiteLogo.trim() || undefined,
        websiteRemark: websiteForm.value.websiteRemark.trim() || undefined,
        websiteSort: websiteForm.value.websiteSort || 0
      }
      
      addWebsite(data)
        .then(() => {
          ElMessage.success('新增网站成功')
          showWebsiteDialog.value = false
          loadAllWebsites() // 重新加载数据
        })
        .catch(() => {
          ElMessage.error('新增网站失败，请稍后重试')
        })
    }
  })
}

/**
 * 处理网站菜单更新事件
 * 当网站的所属菜单被修改后，重新加载所有数据
 */
function handleWebsiteMenuUpdated() {
  loadAllWebsites()
}

/**
 * 处理主题切换事件
 * 主题切换的具体逻辑已在 NavigationHeader 组件中处理
 * @description 可以在这里添加主题切换后的额外逻辑，如重新渲染某些组件等
 */
function handleThemeChange() {
  // 可以在这里添加主题切换后的额外逻辑
}

/**
 * 初始化
 * - 初始化主题
 * - 加载所有网站数据
 */
onMounted(() => {
  initTheme()
  loadAllWebsites()
})
</script>

<style scoped lang="scss">
/**
 * CSS变量定义
 * 主题颜色变量，可在运行时动态更新
 */
:root {
  --theme-primary: #667eea;          // 主题主色
  --theme-secondary: #764ba2;        // 主题次色
  --theme-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  // 主题渐变
  --theme-gradient-from: #667eea;     // 渐变起始色
  --theme-gradient-to: #764ba2;       // 渐变结束色
  --theme-accent: #f093fb;            // 强调色
  --theme-background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);  // 背景渐变
  --theme-card-bg: #ffffff;           // 卡片背景色
  --theme-text: #303133;               // 主要文本色
  --theme-text-secondary: #606266;    // 次要文本色
  --theme-border: #e4e7ed;            // 边框色
}

/**
 * 导航页面主容器
 * - 固定高度为视口高度，防止双层滚动条
 * - 使用自定义滚动条样式
 */
.navigation-page {
  min-height: 100vh;
  height: 100vh;                      // 固定高度为视口高度
  background: var(--theme-background);
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease;   // 主题切换时背景色平滑过渡
  overflow-x: hidden;                 // 防止横向滚动
  overflow-y: auto;                    // 允许垂直滚动
  
  /* 自定义滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
  
  // Webkit浏览器滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3);
    border-radius: 3px;
    transition: background 0.3s ease;
    
    &:hover {
      background: rgba(144, 147, 153, 0.5);
    }
  }
}

/**
 * 主内容区域
 * - 包含左侧菜单和右侧内容区
 * - 使用flex布局，充分利用整个宽度
 */
.navigation-main {
  flex: 1;
  display: flex;
  width: 100%;
  position: relative;
  align-items: flex-start;             // 确保侧边栏和内容区顶部对齐
  padding: 0;
  overflow: visible;                    // 允许 sticky 定位工作
}

/**
 * 响应式设计
 * 移动端（宽度小于1024px）时，改为垂直布局
 */
@media (max-width: 1024px) {
  .navigation-main {
    flex-direction: column;            // 移动端改为垂直布局
  }
}

/* 图标SVG样式 */
.icon-svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  vertical-align: middle;
}
</style>
